import React, { useState, useEffect } from 'react'
import { _getMenuList } from '../../../../api/menu'
import { _deleteRightInfo, _deleteRightChild, _patchRightInfo, _patchRightChild } from '../../../../api/rightlist'
import { Table, Tag, Button, Modal, message, Switch } from 'antd'
import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import './rightlist.css'

const { confirm } = Modal;

function recursive(data, index = 1) {

  data.forEach(item => {
    item.level = index
    if (item.children?.length === 0) {
      item.children = null
    }
    if (item.children?.length > 0) {
      recursive(item.children, index + 1)
    }
  });

  return data
}
// 数字转汉字
function toChinesNum(num) {
  let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
  let unit = ["", "十", "百", "千", "万"];
  num = parseInt(num);
  let getWan = (temp) => {
    let strArr = temp.toString().split("").reverse();
    let newNum = "";
    for (var i = 0; i < strArr.length; i++) {
      newNum = (i === 0 && strArr[i] === 0 ? "" : (i > 0 && strArr[i] === 0 && strArr[i - 1] === 0 ? "" : changeNum[strArr[i]] + (strArr[i] === 0 ? unit[0] : unit[i]))) + newNum;
    }
    return newNum;
  }
  let overWan = Math.floor(num / 10000);
  let noWan = num % 10000;
  if (noWan.toString().length < 4) { noWan = "0" + noWan; }
  return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
}

export default function RightList() {

  const [dataSource, setDataSource] = useState([])

  useEffect(() => {
    _getMenuList().then(res => {
      // 递归遍历新增层级属性
      let data = recursive(res)
      setDataSource(data)
    })
  }, [])

  const columns = [{
    title: '权限层级',
    dataIndex: 'level',
    align: "center",
    render: (key) => {
      return <Tag color={key === 1 ? 'blue' : key === 2 ? 'orange' : key === 3 ? 'magenta' : key === 4 ? 'volcano' : 'green'}>{toChinesNum(key) + '级'}</Tag>
    }
  }, {
    title: '权限名称',
    dataIndex: 'title',
    key: 'title',
    align: "center",
    render: (item) => {
      return item.level === 1 ? <b>{item}</b> : <span>{item}</span>
    }
  }, {
    title: '权限地址',
    align: "center",
    render: (item) => {
      return <Tag color={item.level === 1 ? 'blue' : item.level === 2 ? 'orange' : item.level === 3 ? 'magenta' : item.level === 4 ? 'volcano' : 'green'}>{item.key}</Tag>
    }
  }, {
    title: '操作',
    align: "center",
    render: (item) => {
      return <div className="func">
        <Button type="primary" danger shape="circle" onClick={() => Openconfirm(item)} icon={<DeleteOutlined />} />
        <Switch checked={item.pagepermisson === 1} checkedChildren="显示" unCheckedChildren="隐藏" onChange={() => { changeMethod(item) }} />
      </div>
    }
  },]
  const Openconfirm = (item) => {
    confirm({
      title: '删除权限列表',
      icon: <ExclamationCircleOutlined />,
      content: '此操作将永久删除当前权限及子权限，请确认后执行操作',
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        deleteMethod(item)
      },
      onCancel() {
        console.log('取消删除操作');
      },
    });
  }
  const deleteMethod = (item) => {
    if (item.level === 1) {
      // 删除一级
      _deleteRightInfo(item.id).then(res => {
        setDataSource(dataSource.filter((data) => { return data.id !== item.id }))
        message.success('删除成功!')
      })
    }
    if (item.level === 2) {
      // 查出一级权限
      let once = dataSource.filter(data => data.id === item.rightId)
      once[0].children = once[0].children.filter(data => data.id !== item.id)

      // 删除二级
      _deleteRightChild(item.id).then(res => {
        // 展开dataSouce才能重新刷新页面
        setDataSource([...dataSource])
        message.success('删除成功!')
      })
    }

  }
  // 更新左侧路由的显示隐藏
  const changeMethod = (item) => {
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1
    let query = {
      id: item.id,
      data: { pagepermisson: item.pagepermisson }
    }
    if (item.level === 1) {
      _patchRightInfo(query).then((res) => {
        console.log(res);
        setDataSource([...dataSource])
      })
    }
    if (item.level === 2) {
      _patchRightChild(query).then(() => {
        setDataSource([...dataSource])
      })
    }
  }
  return (
    <div style={{ height: '100%' }} id="tableParent">
      <Table dataSource={dataSource} columns={columns} scroll={{ y: 700, x: 600 }} pagination={{ pageSize: 10 }}></Table>
    </div>
  )
}
